<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i>&nbsp;系统消息列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-loading="loading">
             <!--内容-->
            <div style="height:40px"></div>
                <el-button @click="Addmanagementuser()" type="primary">新增系统消息</el-button>
                <el-table :data="tableData"  style="width: 100%" >
                    <el-table-column prop="id" label="消息ID" width="100" align="center">
                    </el-table-column>
                    <el-table-column prop="content_cn" label="消息内容（中文）" width="450" align="center">
                    </el-table-column>
                    <el-table-column prop="content_en" label="信息内容（英文）" width="450" align="center">
                    </el-table-column>
                    <el-table-column prop="typex" label="消息类型" width="200" align="center">
                    </el-table-column>
                    <el-table-column prop="create_time" label="发布时间" width="200" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope" >
                            <el-button size="small" type="text" @click="Modifyuser(scope.$index, scope.row)" >修  改</el-button>
                            <el-button size="small" style="color: #F56C6C;" type="text" @click="DeleteUseru(scope.$index, scope.row)" >删  除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" v-show="totalPages > 1">
                    <el-pagination v-if="paginationShow" @current-change="handleCurrentChange"  layout="prev, pager, next" :total="totalElements">
                    </el-pagination>
                </div>
            </div>
            <!-- 修改用户信息弹出框 -->
            <el-dialog title="修改管理用户信息" :visible.sync="ModifyPopup"  center >
                <el-form style="width:800px; margin:0 auto"  label-width="150px">
                    <el-form-item label="消息类型：">
                        <el-select v-model="Messagetypex" placeholder="请选择消息类型">
                            <el-option 
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="消息内容（中文）：">
                        <el-input v-model="MessageZHx" type="textarea" :rows="4" placeholder="请输入消息内容" style="width:500px"></el-input>
                    </el-form-item>
                    <el-form-item label="消息内容（英文）：">
                        <el-input v-model="MessageENx" type="textarea" :rows="4" placeholder="请输入消息内容" style="width:500px"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="ConfirmResetuser()">确定修改</el-button>
                </div>
            </el-dialog>
            <!-- 增加系统消息 -->
            <el-dialog title="新增系统信息" :visible.sync="NewUsers"  center >
                <el-form style="width:800px; margin:0 auto"  label-width="150px">
                    <el-form-item label="消息类型：">
                        <el-select v-model="Messagetype" placeholder="请选择消息类型">
                            <el-option 
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="消息内容（中文）：">
                        <el-input v-model="MessageZH" type="textarea" :rows="3" placeholder="请输入消息内容" style="width:500px"></el-input>
                    </el-form-item>
                    <el-form-item label="消息内容（英文）：">
                        <el-input v-model="MessageEN" type="textarea" :rows="3" placeholder="请输入消息内容" style="width:500px"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="ConfirmAdd()">确定添加</el-button>
                </div>
            </el-dialog>
        </div>
</template>  

<script>
import Cookies from 'js-cookie';
import { GetMessageList, AddMessage } from '@/api/systeminformation';
import { ModifyMessage, DeleteMessage } from '@/api/systeminformation';
export default {
    name:"systeminformation",
    data() {
        return {
            pageIndex: 1, // 当前页码
            pageSize: 10, // 每页10条
            totalElements: 1, // 默认的总条数
            totalPages: 1, // 默认的总页数
            tableData: [], // 表格数据
            loading: true, // 加载状态
            MessageZH: '', // 中文消息内容
            MessageEN: '', // 英文消息内容
            MessageZHx: '', // 修改中文消息内容
            MessageENx: '', // 修改英文消息内容
            MessageID: 0, // 消息ID
            Messagetype: null, // 新增消息类型
            Messagetypex: '', // 修改消息类型
            ModifyPopup: false, // 修改用户弹出窗状态
            NewUsers: false, // 新增用户弹出框状态
            paginationShow: true, // 重新显示分页
            options: [{ // 角色数据
                value: '1',
                label: '活动礼包'
                }, {
                value: '2',
                label: '系统消息'
                }],
            
        }
    },
    //监听
    watch: {
        
    },
    //实例创建
    created(){
        //获得消息列表
        this.getData();
    },
    //计算属性
    computed:{

    },
    //方法
    methods: {
        //获得消息列表
        getData(){
            var param = {};
            param.pageIndex = this.pageIndex; // 当前页码
            param.pageSize = this.pageSize; // 当前页数
             GetMessageList(param).then(res => {
                if (res.code == 200) {
                    var data = res.data; //当前返回的数据
                    data.list.forEach((value, index)=> {
                    value.typex = value.type==1? "活动礼包":"系统消息";
                    });
                    this.tableData = data.list; //列表数据
                    this.loading = false; // 加载状态
                    this.totalElements = data.total; //总条数
                    this.totalPages = Math.ceil(data.total / this.pageSize); //总页数
                } else {
                    this.$notify.error({
                        title: "异常",
                        offset: 100,
                        message: res.msg
                    });
                }
            });
        },
        // 分页
        handleCurrentChange(val){
            if(val){
                this.pageIndex = val;
                this.getData(); 
            }
        },
        // 回车事件
        onSubmit(value) {
            this.confirm(); // 修改密码    
        },
        // 回车事件
        onresetPassword() {
            // 确认重置密码
            this.ConfirmReset();    
        },
        // 确认修改系统信息
        ConfirmResetuser() {
            // 判断信息内容
            if(this.MessageZHx == ''){
                this.$notify.error({
                    title: '请输入中文消息内容',
                    duration: 2000,
                });
                return false;
            }else if(this.MessageENx == ''){
                this.$notify.error({
                    title: '请输入英文消息内容',
                    duration: 2000,
                });
                return false; 
            }else if(this.Messagetypex == ''){
                this.$notify.error({
                    title: '请选择消息类型',
                    duration: 2000,
                });
                return false; 
            }
            var param = {};
            param.id = this.MessageID; // 修改消息ID
            param.type = this.Messagetypex; // 消息类型
            param.contentCn = this.MessageZHx; // 中文消息内容
            param.contentEn = this.MessageENx; // 英文消息内容
            ModifyMessage(param).then( res=> {
                if(res.code == 200){
                    this.ModifyPopup = false; // 修改用户弹出框
                        this.MessageZHx = ''; // 清空输入框
                        this.MessageENx = ''; // 清空输入框
                        this.Messagetypex = ''; // 默认选择框
                        this.getData(); // 更新列表
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    });
                }else{
                    this.$notify.error({
                        title: '修改失败',
                        duration: 2000,
                        message: '失败原因：'+res.msg
                    });
                }
            });
        },
        // 确认添加系统消息
        ConfirmAdd(){
            // 判断消息内容是否为空
            if(this.MessageZH == ''){
                this.$notify.error({
                    title: '请输入中文消息内容',
                    duration: 2000,
                });
                return false;
            }else if(this.MessageEN == ''){
                this.$notify.error({
                    title: '请输入英文消息内容',
                    duration: 2000,
                });
                return false; 
            }else if(this.Messagetype == ''){
                this.$notify.error({
                    title: '请选择消息类型',
                    duration: 2000,
                });
                return false; 
            }
            var params = {};
            params.type = parseInt(this.Messagetype);  // 消息类型
            params.contentCn = this.MessageZH; // 中文消息内容
            params.contentEn = this.MessageEN; // 中文消息内容
            AddMessage(params).then( res=> {
                if(res.code == 200){
                    this.NewUsers = false; // 新增弹出框
                    this.Messagetype = null; // 清空消息类型
                    this.MessageZH = ''; // 清空中文消息内容
                    this.MessageEN = ''; // 清空中文消息内容
                    this.getData(); // 更新列表
                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    }); 
                }else{
                    this.$notify.error({
                        title: '添加失败',
                        duration: 2000,
                        message: '失败原因：'+res.msg
                    });
                }
            });
        },
        // 新增管理用户
        Addmanagementuser() {
            this.NewUsers = true; // 新增用户弹出框
        },
        // 修改系统信息
        Modifyuser(index, row) {
            this.ModifyPopup = true; // 修改弹出框
            this.MessageID = row.id; // 修改消息Id
            this.MessageZHx  = row.content_cn; // 修改中文消息内容
            this.MessageENx  = row.content_en; // 修改真实姓名
            this.Messagetypex  = String(row.type); // 消息类型
        },
        // 删除信息
        DeleteUseru(index, row) {
            this.$confirm('此操作将永久删除这条信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                DeleteMessage(row.id).then( res=> {
                    if(res.code == 200){
                        this.getData(); // 更新列表
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{
                        this.$notify.error({
                            title: '删除失败',
                            duration: 2000,
                            message: '失败原因：'+res.msg
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
    }
}
</script>
<style lang="stylus" scoped>
    
</style>
